<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ page isELIgnored="true" %>
<!-- 在线留言 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>签到</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<style>

    .test {
        position: relative;
        top: 0;
        margin-left: 200px;
        padding-bottom: 10px;
    }

    .title {
        font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
        font-size: 32px;
        font-weight: bold;
        color: #000;
        margin-top: 40px;
        margin-bottom: 20px;
        text-align: center;
    }

    .signListDiv {
        margin: 8px;
    }
</style>
<body>
<div class="test" id="signApp">
    <div class="title">待签到列表</div>
    <div class="signListDiv">
        <el-table
                :data="tableData"
                style="width: 90%">
            <el-table-column
                    prop="signName"
                    label="签到任务名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="teacherName"
                    label="老师名字"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="startTime"
                    label="开始时间"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="endTime"
                    label="结束时间"
                    width="180">
            </el-table-column>

            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" round @click="signIn(scope.row.id)">签到</el-button>
                </template>
            </el-table-column>

        </el-table>
    </div>
</div>
<div style="height: 20px"></div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<!-- axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 引入element-ui组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    const signApp = new Vue({
        el: '#signApp',
        data() {
            return {
                tableData: [
                    {
                        id: 1,
                        signName: '测试签到',
                        teacherName: '王小虎',
                        startTime: '2019-01-01 12:00:00',
                        endTime: '2019-01-01 12:00:00'
                    }, {
                        id: 2,
                        signName: '测试签到2',
                        teacherName: '王小虎2',
                        startTime: '2019-01-01 12:00:00',
                        endTime: '2019-01-01 12:00:00'
                    }, {
                        id: 3,
                        signName: '测试签到3',
                        teacherName: '王小虎3',
                        startTime: '2019-01-01 12:00:00',
                        endTime: '2019-01-01 12:00:00'
                    },
                ]
            }
        },
        methods: {
            signIn: function (id) {
                const _this = this;
                // 进行签到
                axios({
                    url: '/jspmk28g8/signTask/sign',
                    method: 'post',
                    data: {
                        "userId": window.localStorage.getItem("userid"),
                        "signTaskId": id
                    },
                    headers: {
                        'Content-Type': 'application/json',
                        'token': window.localStorage.getItem("Token"),
                    }
                }).then(function (response) {
                    if (response.data.code === 200) {
                        _this.$notify({
                            message: '签到成功',
                            type: 'success'
                        });
                        _this.getStudentNeedSignList()
                    } else {
                        _this.$notify.error({
                            message: '签到失败',
                        });
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            },
            getStudentNeedSignList: function () {
                const _this = this;
                // 获取当前用户的需要进行签到的任务
                axios({
                    url: '/jspmk28g8/signTask/getStuSignList',
                    method: 'get',
                    params: {
                        userId: window.localStorage.getItem("userid")
                    },
                    headers: {
                        'Content-Type': 'application/json;charset=UTF-8',
                        'token': window.localStorage.getItem("Token"),
                    }
                }).then(function (res) {
                    console.debug(res);
                    _this.tableData = []
                    const {code, data} = res.data;
                    if (code == 200) {
                        data.forEach(function (item) {
                            const t = {
                                id: item.taskId,
                                signName: item.signName,
                                teacherName: item.teacherName,
                                startTime: item.startTime,
                                endTime: item.endTime,
                            }
                            _this.tableData.push(t);
                        })
                    }
                }).catch(function (error) {
                    console.debug(error);
                });
            }
        },
        mounted() {
            console.debug("mounted");
            const _this = this;
            // 获取当前用户的信息
            const userId = window.localStorage.getItem("userid");
            console.debug("userId:" + userId);
            if (!userId) {
                console.debug("userId is null");
                this.$alert('未登录，请登录！', {
                    confirmButtonText: '确定',
                    showClose: false,
                    center: true,
                    callback: action => {
                    }
                });
                return false;
            } else {
                console.debug("userId is not null");
                this.getStudentNeedSignList()
            }
        }
    });
</script>
</body>
</html>